<template>
  <div id="centerLeft1">
    <chartBox title="“打”">
      <div class="content">
        <div class="line d-flex jc-space-between" v-for="(item,index)  in domList" :key="index">
          <div class="item mr-12 flex_center">
            <img class="img" :src="require(`@/assets/img/tb/${item.p1}.png`)"/>
            <div class="ml-16">
              <div class="title">{{ item.t1 }}</div>
              <div class="num">{{ item.n1 }} <span class="specifications">人</span></div>
            </div>
          </div>
          <div class="item flex_center">
            <img class="img" :src="require(`@/assets/img/tb/${item.p2}.png`)"/>
            <div class="ml-16">
              <div class="title">{{ item.t2 }}</div>
              <div class="num">{{ item.n2 }} <span class="specifications">人</span></div>
            </div>
          </div>
        </div>
      </div>
    </chartBox>
  </div>
</template>

<script>
import chartBox from '_c/chartBox.vue'

export default {
  props: {
    apiData: {}
  },
  watch: {
    apiData: {
      handler(val) {
        if (!val) return
        this.dataFormat(val)
      },
      immediate: true,
      deep: true
    },
  },
  data() {
    return {
      domList: [
        {
          t1: '刑拘',
          n1: '100000',
          p1: 'xj',
          t2: '盗窃拘留',
          n2: '0',
          p2: 'dq',
        }, {
          t1: '盗窃电动自行车',
          n1: '0',
          p1: 'dc',
          t2: '电诈拘留',
          n2: '0',
          p2: 'dz',
        }, {
          t1: '治拘',
          n1: '0',
          p1: 'zj',
          t2: '涉黄刑拘',
          n2: '0',
          p2: 'sh',
        }, {
          t1: '涉赌刑拘',
          n1: '0',
          p1: 'sd',
          t2: '涉毒刑拘',
          n2: '0',
          p2: 'sdu',
        },
      ]
    }
  },
  components: {
    chartBox
  },
  mounted() {
  },
  methods: {
    dataFormat(data) {
      const mapping = {
        xj: 'xingJuNum',
        dq: 'daoQieJuLiuNum',
        dc: 'keydaoCheNum',
        dz: 'dianZhaNum',
        zj: 'zhiJuNum',
        sh: 'sheHuangNum',
        sdu: 'sheDuNum',
        sd: 'sheDuBoNum'
      }

      this.domList = this.domList.map(item => ({
        ...item,
        n1: data[mapping[item.p1]] !== undefined ? data[mapping[item.p1]] : item.n1,
        n2: data[mapping[item.p2]] !== undefined ? data[mapping[item.p2]] : item.n2
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 472px;
$box-height: 398px;
$font-family: PingFang SC, PingFang SC, sans-serif;

#centerLeft1 {
  //height: $box-height;
  width: $box-width;

  .content {
    padding: 12px 24px;

    .line {
      //justify-content: space-between;
      margin-bottom: 12px;

      &:nth-child(1) {
        margin-bottom: 0;
      }

      .item {
        width: 50%;
        padding: 14px 16px;
        background-image: url(@/assets/img/chart_box_item_bg.png);

        .img {
          width: 56px;
          height: 56px;
          display: flex;
          align-items: center;
        }

        .title {
          font-family: $font-family;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 14px;
          text-align: center;
        }

        .num {
          font-family: $font-family;
          font-weight: 600;
          font-size: 22px;
          color: #17B9D6;
          line-height: 22px;
          margin-top: 8px;
        }

        .specifications {
          font-family: $font-family;
          font-weight: 400;
          font-size: 12px;
          color: rgba(162, 190, 208, 0.6);
          line-height: 12px;
          text-align: center;
        }
      }
    }
  }
}

</style>
